<template>
  <a-layout class="full">
    <a-layout-header class="header px_default">
      <div class="align-items_center h_full">
        <img src="/images/image1.png" class="profile" alt="" />
        <div class="h3 name ml_sm">老师名称</div>
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider class="sider">
        <div class="menu">学习进度</div>
      </a-layout-sider>
      <a-layout-content class="bg_lighter">
        <div class="justify_between gap_md h_full px_sm">
          <div class="flex_1 p_lg bg_white mr_sm">
            <div class="">
              <h3 class="t_center mb_lg">学生完成情况</h3>

              <div class="overflow-y bg_lighter p_xs radius_sm">
                <ProgressBar :value="80" />
                <ProgressBar :value="25" />
                <ProgressBar :value="100" />
                <ProgressBar :value="90" />
                <ProgressBar :value="50" />
                <ProgressBar :value="76" />
                <ProgressBar :value="40" />
              </div>
            </div>
          </div>
          <div class="flex_1 py_sm flex_column">
            <div class="card flex_3 mb_sm">
              <div class="card-header align-items_center justify_between">
                <div>班级未完成情况</div>
              </div>
              <div class="card-body">
                <RingChart class="ring-chart" :value="80"></RingChart>
                <PieChart class="pie-chart"></PieChart>
              </div>
            </div>

            <div class="card flex_2">
              <div
                class="card-header align-items_center justify_between mb_default"
              >
                <div>班级未完成情况</div>
                <a href="javascript:">一键提醒</a>
              </div>
              <div class="card-body bg_lighter">
                <ul class="user-list p_xs">
                  <li
                    class="user-item bg_white align-items_center justify_between py_xs px_sm"
                  >
                    <div>伊桑陈</div>
                    <a-button class="btn">提醒一下</a-button>
                  </li>
                  <li
                    class="user-item bg_white align-items_center justify_between py_xs px_sm"
                  >
                    <div>伊桑陈</div>
                    <a-button class="btn">提醒一下</a-button>
                  </li>
                  <li
                    class="user-item bg_white align-items_center justify_between py_xs px_sm"
                  >
                    <div>伊桑陈</div>
                    <a-button class="btn">提醒一下</a-button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import RingChart from '@/components/RingChart/index.vue';
import PieChart from '@/components/PieChart/index.vue';
import ProgressBar from '@/components/ProgressBar/index.vue';

export default defineComponent({
  components: {
    RingChart,
    PieChart,
    ProgressBar
  },
});
</script>

<style lang="scss" scoped>
.header {
  background-color: #3969a3;
}

.sider {
  background-color: #dbf5ff;
}

.menu {
  background-color: #80d7ff;
  padding: 32px;
  color: #fff;
  text-align: center;
}

.card {
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
  .card-header {
  }
  .card-body {
  }
}

.user-list {
  .user-item {
    border-bottom: solid 1px #ccc;
  }
}

.ring-chart {
  height: 200px;
}
.pie-chart {
  height: 200px;
}

.btn,
.btn:hover,
.btn:active {
  background: #98d991;
  color: #fff;
}

.profile {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.name {
  color: #fff;
}
</style>
